/**
* Created by alan on 17-5-1.
*/
<template>
  <el-row class="container">
    <el-col :span="24" class="header">
      <el-col :span="20" class="logo">
        <img src="../assets/logo.png" /> <span class="mangerName">悟空招财管理后台</span>
      </el-col>
      <el-col :span="4" class="userinfo">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link userinfo-inner"><img src="../assets/user.png"/> {{userName}}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-show="false">我的消息</el-dropdown-item>
            <el-dropdown-item @click.native="changePassword">修改密码</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-col>
    <el-col :span="24" class="main">
      <aside>
        <el-menu :default-active="$route.path"      
        background-color="#324057"
        text-color="#fff"
        active-text-color="#409eff" unique-opened router>
          <template v-for="(item,index) in menuList ">
            <el-submenu v-if="item.children && item.children.length" :index="index+''" class="sunMenuBg" >
              <template slot="title"><i class="el-icon-menu el_icon"></i><span class="itemName">{{item.permissionName}}</span></template>
              <el-menu-item v-for="(node,i) in item.children" :key="node.permissionUrl" :index="node.permissionUrl"><i class="el-icon-document"></i>{{node.permissionName}}</el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="item.permissionUrl"><i class="el-icon-document el_icon"></i><span class="itemName">{{item.permissionName}}</span></el-menu-item>
          </template>
        </el-menu>
      </aside>
      <section class="content-container">
        <el-col :span="24" class="breadcrumb-container">
          <strong class="title">{{$route.name}}</strong>
          <el-breadcrumb separator="/" class="breadcrumb-inner">
            <el-breadcrumb-item v-for="item in $route.matched" :key="item.name">
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="24" class="content-wrapper">
          <transition>
            <router-view></router-view>
          </transition>
        </el-col>
      </section>
      <ml-change-password ref="changePassword" changeType="2" :uuid="userUuid"></ml-change-password>
      <ml-message></ml-message>
    </el-col>
  </el-row>
</template>
<script>
import DataUtil from "../common/dataUtil";
import mlChangePassword from "../components/_changePassword.vue";
import mlMessage from "../components/Message.vue";
export default {
  data() {
    return {
      userName: "",
      userUuid: DataUtil.uuid(),
      menuList: [
        {
          permissionName: "系统管理",
          permissionUrl: "/",
          children: [
            {
              permissionName: "APP版本管理",
              permissionUrl: "/AppVersion"
            },
            {
              permissionName: "权限列表",
              permissionUrl: "/Permission"
            },
            {
              permissionName: "角色管理",
              permissionUrl: "/Role"
            },
            {
              permissionName: "用户管理",
              permissionUrl: "/Manager"
            }
          ]
        },
        {
          permissionName: "运营管理",
          permissionUrl: "/",
          children: [
            {
              permissionName: "客户管理",
              permissionUrl: "/UserList"
            },
            {
              permissionName: "用户反馈列表",
              permissionUrl: "/UserFeedBack"
            }
          ]
        },
        {
          permissionName: "审核管理",
          permissionUrl: "/",
          children: [
            {
              permissionName: "自动审核配置",
              permissionUrl: "/AuditConf"
            }
          ]
        },
        {
          permissionName: "订单管理",
          permissionUrl: "/",
          children: [
            {
              permissionName: "订单管理",
              permissionUrl: "/OrderListAll"
            },
            {
              permissionName: "逾期订单",
              permissionUrl: "/OverDueOrderList"
            },
            {
              permissionName: "已还款订单",
              permissionUrl: "/RepaymentOrderList"
            }
          ]
        },
        {
          permissionName: "数据管理",
          permissionUrl: "/",
          children: [
            {
              permissionName: "贷款数据统计",
              permissionUrl: "/DataInsight"
            },
            {
              permissionName: "当日用户数据统计",
              permissionUrl: "/UserInsight"
            }
          ]
        }
      ]
    };
  },
  methods: {
    changePassword() {
      this.$refs.changePassword.show();
    },
    //退出登录
    logout() {
      this.$confirm("确认退出登录吗?", "提示", {})
        .then(() => {
          DataUtil.sid("");
          this.$router.push("/login");
        })
        .catch(() => {});
    },
    pageInit() {
      this.userName = DataUtil.userName();
      //this.userUuid = DataUtil.uuid()
    },
    getMenuList() {
      var postData = {
        id: DataUtil.id()
      };
      this.$http
        .post("manage/permissionTreeByUserId", postData)
        .then(response => {
          let { status, body } = response;
          this.menuList = body.data; //请求返回左侧导航栏
          DataUtil.savePermission(body.data); /*将权限列表存入localStorage*/
        });
    }
  },
  mounted() {
    this.pageInit();
    this.getMenuList();
  },
  components: {
    mlChangePassword,
    mlMessage
  }
};
</script>
<style scoped>
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}

.header {
  height: 60px;
  line-height: 60px;
  background: #324057;
  color: #c0ccda;
}

.logo {
  font-size: 15px;
}

.logo img {
  width: 40px;
  float: left;
  margin: 10px 10px 10px 18px;
}

.userinfo {
  text-align: right;
  padding-right: 35px;
}

.userinfo-inner {
  color: #c0ccda;
  cursor: pointer;
}

.userinfo-inner img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin: 10px 0px 10px 10px;
  float: right;
}

.main {
  background: #324057;
  position: absolute;
  top: 60px;
  bottom: 0px;
  overflow: hidden;
}
.mangerName {
    font-size: 22px;
    color: #80d0ff;
}
.main aside {
  width: 240px;
  overflow-y: auto;
  overflow: auto;
  height: 100%;
  background: #324057;
}
.main aside::-webkit-scrollbar {
  width: 10px;
  height: 5px;
  background-color: #f5f5f5;
}
.el-menu-item.is-active {
  background-color: #48576a;
}
/*定义滚动条轨道 内阴影+圆角*/
.main aside::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
.main aside::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}

.main .el_icon,.main .itemName{
  color: #fff;
}

.el-submenu [class^="fa"] {
  vertical-align: baseline;
  margin-right: 10px;
}

.el-menu-item [class^="fa"] {
  vertical-align: baseline;
  margin-right: 10px;
}

.content-container {
  background: #f1f2f7;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  left: 240px;
  overflow-y: scroll;
  padding: 20px;
}

.breadcrumb-container {
  margin-bottom: 15px;
}

.title {
  width: 200px;
  float: left;
  color: #475669;
}

.breadcrumb-inner {
  float: right;
}

.content-wrapper {
  background-color: #fff;
  box-sizing: border-box;
}

</style>
